@require "../../../css/variables.styl"
@require "../../../css/mixin.styl"

.va-df-checkbox-wrapper
  height 34px
  display inline-flex
  align-items center
  line-height 0

// 普通状态
.va-df-checkbox
  vertical-align middle
  white-space nowrap
  cursor pointer
  outline none
  display inline-flex
  align-items center
  position relative

  &-label
    margin-left 4px
    font-size 14px

  &-disabled
    cursor not-allowed

  &:hover
    .va-df-checkbox-inner
      border-color $color-df-input-border-focus

  &-inner
    display inline-block
    width 14px
    height 14px
    position relative
    top 0
    left 0
    border 1px solid $color-df-checkbox-border
    background-color #fff
    transition border-color $time-df-transition ease-in-out, background-color $time-df-transition ease-in-out
    form-control-focus()

    &:after
      content ''
      display table
      width 4px
      height 8px
      position absolute
      top 1px
      left 4px
      border 2px solid #fff
      border-top 0
      border-left 0
      transform rotate(45deg) scale(0)
      transition all $time-df-transition ease-in-out

  &-input
    width 100%
    height 100%
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    z-index 1
    cursor pointer
    opacity 0

    &[disabled]
      cursor not-allowed

// 选中状态
.va-df-checkbox-checked

  &:hover
    .va-df-checkbox-inner
      border-color $color-primary

  .va-df-checkbox-inner
    border-color $color-primary
    background-color $color-primary

    &:after
      content ''
      display table
      width 4px
      height 8px
      position absolute
      top 1px
      left 4px
      border 2px solid #fff
      border-top 0
      border-left 0
      transform rotate(45deg) scale(1)
      transition all $time-df-transition ease-in-out

// 禁用
.va-df-checkbox-disabled
  &.va-df-checkbox-checked
    &:hover
      .va-df-checkbox-inner
        border-color $color-df-checkbox-border

    .va-df-checkbox-inner
      background-color #f3f3f3
      border-color $color-df-checkbox-border

      &:after
        animation-name none
        border-color #ccc

  &:hover
    .va-df-checkbox-inner
      border-color $color-df-checkbox-border

  .va-df-checkbox-inner
    border-color $color-df-checkbox-border
    background-color #f3f3f3
    &:after
      animation-name none
      border-color #f3f3f3

  .va-df-checkbox-inner-input
    cursor default

  & + span
    color #ccc
    cursor not-allowed


.va-df-checkboxgroup
  .va-df-checkbox-wrapper
    &:not(:last-child)
      margin-right 10px
